<template>
    <div>
        <van-nav-bar title="Vant使用" fixed placeholder left-arrow @click-left="onClickLeft" />
        <van-tabs v-model:active="active">
            <van-tab title="标签 1">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-cell v-for="item in list" :key="item" :title="item" />
                </van-list>
            </van-tab>
            <van-tab title="标签 2">内容 2</van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">内容 4</van-tab>
            <van-tab title="标签 5">内容 5</van-tab>
            <van-tab title="标签 6">内容 6</van-tab>
            <van-tab title="标签 7">内容 7</van-tab>
            <van-tab title="标签 8">内容 8</van-tab>
        </van-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { NavBar, List, Cell, showImagePreview, Tab, Tabs } from 'vant';
const onClickLeft = () => history.back();
const active = ref(0);
const list = ref<number[]>([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            list.value.push(list?.value?.length + 1);
        }
        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= 40) {
            finished.value = true;
        }
    }, 1000);
};
</script>

<style scoped></style>